import type { FC, PropsWithChildren } from "react";
import Icon from "../../../Icon";
import View from "../../../common/View";
import { getRgb, initvalue } from "../../../common/utils";
import { useAccentColor } from "../../../common/hooks/useAccentColor";
import { context } from "../../../common/context";

const Index: FC<PropsWithChildren<{ name: string }>> = ({ children, name }) => {
  const {
    resume: { customization, content },
    fontScale,
  } = context;

  const { spacing, applyAccentColor, title } = customization;

  const { showIcon, style, titleBkg: bkg } = title || {};
  const { fontSize, spacingFactor } = spacing;
  const titleFontSize = `${
    ((fontSize || 0) * 0.5 + initvalue.fontSize + 1) * fontScale
  }pt`;
  const item = content[name];
  const styles: any = {
    display: "flex",
    alignItems: "center",
    gap: "4px",
    fontSize: titleFontSize,
    marginBottom: `${spacingFactor * 0.2 + 2}px`,
    paddingBottom: "5px",
    paddingTop: "5px",
    lineHeight: 1.2,
  };

  const [color, position] = useAccentColor(name);
  if (applyAccentColor?.includes("headings") && position) {
    styles.color = color;
  }
  let titleBkg = null;
  let borderBottomColor = `currentColor`;
  if (bkg) {
    titleBkg = getRgb(bkg);
    borderBottomColor = getRgb(bkg);
  }

  return (
    <View>
      {style === "underline" ? (
        <h3 style={styles}>
          <span
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: "4px",
              borderBottom: `2px solid ${borderBottomColor}`,
            }}
          >
            {children || (
              <>
                {showIcon ? <Icon name={item?.iconKey}></Icon> : null}
                {item?.displayName}
              </>
            )}
          </span>
        </h3>
      ) : null}
      {style === "box" ? (
        <h3
          style={{
            ...styles,
            background: titleBkg || "rgba(0,0,0,.04)",
            justifyContent: "center",
          }}
        >
          {children || (
            <>
              {showIcon ? <Icon name={item?.iconKey}></Icon> : null}
              {item?.displayName}
            </>
          )}
          {/* </span> */}
        </h3>
      ) : null}
      {style === "boxleft" ? (
        <h3
          style={{
            ...styles,
            background: titleBkg || "rgba(0,0,0,.04)",
            paddingLeft: "10px",
          }}
        >
          {children || (
            <>
              {showIcon ? <Icon name={item?.iconKey}></Icon> : null}
              {item?.displayName}
            </>
          )}
        </h3>
      ) : null}
      {style === "line" ? (
        <h3 style={{ ...styles, borderBottom: `1px solid ${styles.color}` }}>
          {children || (
            <>
              {showIcon ? <Icon name={item?.iconKey}></Icon> : null}
              {item?.displayName}
            </>
          )}
        </h3>
      ) : null}
      {style === "simple" || !style ? (
        <h3 style={{ ...styles, padding: 0 }}>
          {children || (
            <>
              {showIcon ? <Icon name={item?.iconKey}></Icon> : null}
              {item?.displayName}
            </>
          )}
        </h3>
      ) : null}
    </View>
  );
};
export default Index;
